<template>
  <div class="head">
    <heads></heads>
    <div class="banner">
    <div class="cont w1000">
      <div class="title">
        <h3>MY
          <br/>
          BLOG
        </h3>
        <h4>well-balanced heart</h4>
      </div>
      <div class="amount">
        <p>
          <span class="text1">
            访问量
          </span>
          <span class="access">1000</span>
        </p>
        <span class="text1">
          日志
        </span>
        <span class="daily-record">1000</span>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="cont w1000">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设计文章" name="first">
          <div class="list-item">
            <div class="item" v-for="(item,index) in imgdata" :key="index">
              <div class="clo">
                <div class="item-1">
                  <img src="../assets/sy_img1.jpg" alt="">
                </div>
                <div class="item-cont">
                  <h3>
                    {{h3data[index]}}
                    <el-button type="text">new</el-button>
                  </h3>
                  <h5>{{h5data[index]}}</h5>
                  <p>{{textdata}}</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="前端文章" name="second">
          <div class="list-item">
            <div class="item" v-for="(item,index) in imgdata" :key="index">
              <div class="clo">
                <div class="item-1">
                  <img src="../assets/sy_img1.jpg" alt="">
                </div>
                <div class="item-cont">
                  <h3>
                    {{h3data[index]}}
                    <el-button type="text">new</el-button>
                  </h3>
                  <h5>{{h5data[index]}}</h5>
                  <p>{{textdata}}</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="旅游杂记" name="third">
          <div class="list-item">
            <div class="item" v-for="(item,index) in imgdata" :key="index">
              <div class="clo">
                <div class="item-1">
                  <img src="../assets/sy_img1.jpg" alt="">
                </div>
                <div class="item-cont">
                  <h3>
                    {{h3data[index]}}
                    <el-button type="text">new</el-button>
                  </h3>
                  <h5>{{h5data[index]}}</h5>
                  <p>{{textdata}}</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
  </div>
  <div class="Pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
  </div>
    <div class="footer-wrap">
      <div class="br"></div>
      <div class="footer w1000">
        <div class="qrcode">
          <img src="../assets/erweima.jpg" alt="">
        </div>
        <div class="practice-mode">
          <img src="../assets/down_img.jpg" alt="">
          <div class="text">
            <p v-for="(item,index) in pdata" :key="index">{{item}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import heads from './heads.vue'
export default {
  components: { heads },
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      activeName: 'first',
      pdata: ['我的联系方式', '微信:1213456789', '邮箱:1234567890@qq.com', 'More Templates 模板之家 - Collect from 网页模板'],
      h3data: ['空间立体效果图，完美呈现最终效果1', '空间立体效果图，完美呈现最终效果2', '空间立体效果图，完美呈现最终效果3', '空间立体效果图，完美呈现最终效果4', '空间立体效果图，完美呈现最终效果4'],
      h5data: ['设计文章1', '设计文章2', '设计文章3', '设计文章4', '设计文章5'],
      imgdata: ['../assets/sy_img1.jpg', '../assets/sy_img1.jpg', '../assets/sy_img1.jpg', '../assets/sy_img1.jpg', '../assets/sy_img1.jpg'],
      textdata: '室内设计作为一门新兴的学科，尽管还只是近数十年的事，但是人们有意识地对自己生活、生产活动的室内进行安排布置，甚至美化装饰，赋予室内环境以所祈使的气氛，却早巳从人类文明伊始的时期就已存在'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    quit () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>
<style>
.banner{
  height: 600px;
  width: 100%;
  background: url(../assets/banner.jpg);
  background-repeat: round;
}
.banner .cont{
  position: relative;
}
.w1000{
  max-width: 1000px!important;
  margin: 0 auto;
}
.banner .title{
  color: #fff;
  position: absolute;
  top: 152px;
  left: 0;
}
.banner .title h3{
  font-size: 80px;
  line-height: 88px;
}
.banner .title h4{
  font-size: 46px;
  margin: -90px 0;
}
.banner .amount{
  font-size: 18px;
  line-height: 50px;
  color: #ff7f21;
  position: absolute;
  right: 20px;
  top: 290px
}
.content{
  width: 100%;
  height: 1800px;
}
.list-item{
  width: 1000 px;
}
.item-1{
  width: 1000px;
  height: 324px;
}
.item-cont{
  position: absolute;
  left: 490px;
  margin: -280px 0;
}
.item-cont h3{
  font-size: 24px;
}
.item-cont h5{
  font-size: 12px;
  color: #ff7f21;
}
.item-cont p{
  width: 483.32px;
  height: 67px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.el-pagination{
  text-align: center;
}
.br{
  height: 1px;
  width: 100%;
  background-color: black;
}
.footer-wrap{
  /* position: relative; */
  margin-top: 200px;
}
.footer{
  padding: 30px 0 80px 0;
  position: relative;
  overflow: hidden;
}
.w1000 {
  max-width: 1000px!important;
  margin: 0 auto;
}
.footer .qrcode {
  float: left;
}
.footer .practice-mode {
  width: 374.25px;
  height: 160px;
  position: relative;
  margin-left: 400px;
}
.footer .practice-mode .text {
  position: relative;
  color: #3f2863;
  float: left;
  margin: -10px -60px;
}
.practice-mode p{
  width: 306.25px;
  font-size: 14px;
}
</style>
